// 获取学员数据 渲染表格
// 封装函数
function renderStudent() {
  axios({
    url: '/students',
    // headers: {
    //   Authorization: localStorage.getItem('token')
    // }
  }).then(res => {
    document.querySelector('.list').innerHTML = res.data.data.map(item => {
      return `
      <tr>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.gender}</td>
        <td>${item.group}</td>
        <td>${item.hope_salary}</td>
        <td>${item.salary}</td>
        <td>${item.province}${item.city}${item.area}</td>
        <td>
          <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen " data-id="${item.id}"></i></a>
          <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id="${item.id}"></i></a>
        </td>
      </tr>
      `
    }).join('')
  })
}
renderStudent()


// ---------------------------------------------省市县联动----------------------------------
// 获取省 并渲染
let sheng = '<option value="">--省份--</option>'
let shi = '<option value="">--城市--</option>'
let xian = '<option value="">--地区--</option>'

let province = document.querySelector('[name=province]')
let city = document.querySelector('[name=city]')
let area = document.querySelector('[name=area]')

let title = document.querySelector('.modal-title')

axios({
  url: '/api/province'
}).then(res => {
  let newArr = res.data.data.map(item => `<option value="${item}">${item}</option> `)
  province.innerHTML = sheng + newArr.join('')
})
// 省切换的时候获取市 并渲染
province.addEventListener('change', function () {
  axios({
    url: '/api/city',
    params: {
      pname: province.value
    }
  }).then(res => {
    let newArr = res.data.data.map(item => `<option value="${item}">${item}</option> `)
    city.innerHTML = shi + newArr.join('')
  })
  area.value = ''
})

// 市切换的时候获取县 并渲染
city.addEventListener('change', function () {
  axios({
    url: '/api/area',
    params: {
      pname: province.value,
      cname: city.value
    }
  }).then(res => {
    let newArr = res.data.data.map(item => `<option value="${item}">${item}</option> `)
    area.innerHTML = xian + newArr.join('')
  })
})

// ---------------------------------------------添加学员----------------------------------

let modal = new bootstrap.Modal(document.querySelector('#modal'))
document.querySelector('.modal-title').innerHTML = '添加学员'
// 点击 加号的时候 让模态框显示
document.querySelector('#openModal').addEventListener('click', function () {
  modal.show()
})
// 点击模态框中的 确认 的时候 让模态框隐藏
document.querySelector('#submit').addEventListener('click', function () {

  // 获取表单各项的值
  // let data = val(表单)
  let data = val(document.querySelector('#form'))
  // 检查是否还是接口需要的数据
  data.age = +data.age
  data.group = +data.group
  data.gender = +data.gender
  data.hope_salary = +data.hope_salary
  data.salary = +data.salary
  if (title.innerHTML === '添加学员') {
    // console.log('提交')
    // Ajax 提交
    axios({
      method: 'POST',
      url: '/students',
      data: data
    }).then(res => {
      message.success(res.data.message)
      document.querySelector('#form').reset()
      renderStudent()
      modal.hide()
    })
  }

  if (title.innerHTML === '修改学员') {
    // console.log('修改')
    let id = title.dataset.id
    console.log(id)
    axios({
      method: 'PUT',
      url: `/students/${id}`,
      data
    }).then(res => {
      message.success(res.data.message)
      document.querySelector('#form').reset()
      renderStudent()
      modal.hide()
    })
  }

})

// ---------------------------------------------删除学员----------------------------------
// 找到 tbody 注册点击事件 里面判断点击的是删除还是编辑
document.querySelector('tbody').addEventListener('click', async function (e) {
  if (e.target.classList.contains('bi-trash')) {
    // 说明点击删除
    console.log('你点击了删除')
    let id = e.target.dataset.id
    // 发送 Ajax 请求
    axios({
      url: `/students/${id}`,
      method: 'DELETE'
    }).then(res => {
      message.success('删除成功')
      renderStudent()
    })
  }
  if (e.target.classList.contains('bi-pen')) {
    // 说明点击了编辑
    // console.log('你点击了编辑')
    let id = e.target.dataset.id // 获取编辑按钮的自定义属性值
    console.log(e.target)
    document.querySelector('.modal-title').innerHTML = '修改学员'
    // 下面是设置模态框标题(h5)的自定义属性，值是当前修改的学员的id
    // document.querySelector('.modal-title').setAttribute('属性名', 值)
    document.querySelector('.modal-title').setAttribute('data-id', id)
    modal.show() // 显示模态框
    // 发送请求，获取当前修改的这个学员的详细信息
    let result = await axios({ url: `/students/${id}` })
    console.log(result.data.data) // 输出的是 个人的详细信息
    // 获取城市 和 区县，渲染到第2个和第3个下拉框的位置
    let res1 = await axios({
      url: '/api/city',
      params: {
        pname: result.data.data.province
      }
    })
    let res2 = await axios({
      url: '/api/area',
      params: {
        pname: result.data.data.province,
        cname: result.data.data.city
      }
    })
    // console.log(res1)
    let newArr1 = res1.data.data.map(item => `<option value="${item}">${item}</option>`)
    city.innerHTML = shi + newArr1.join('')
    // console.log(res2)
    let newArr2 = res2.data.data.map(item => `<option value="${item}">${item}</option>`)
    area.innerHTML = xian + newArr2.join('')
    // 做数据回填，继续使用插件 【 val(表单, 数据) 】，关于这个插件，只是简化代码的步骤。
    val(document.querySelector('#form'), result.data.data)
  }
})

// ---------------------------------------------退出按钮----------------------------------
document.querySelector('#logout').addEventListener('click', function () {
  // console.log('点击了退出')

  if (confirm('你确定退出吗')) {
    location.href = './login.html'
    localStorage.removeItem('token')
  } else return


})

// ---------------------------------------------查找学员----------------------------------




